<ion-view >
    <ion-nav-title>{{fund.prod_name | defString }}</ion-nav-title>
    <ion-nav-buttons side="left">
        <back-button></back-button>
    </ion-nav-buttons>
    <ion-content ng-class="{'has-loading': isOffline}">

        <ion-refresher pulling-text={{PULLING_TEXT}} pulling-icon="" refreshing-text={{REFRESHING_TEXT}}
                       on-refresh="doRefresh()"></ion-refresher>
        <!-- unlimited -->
        <div class="unlimited unlimited-item">
            <!-- item -->
            <div class="on">
                <div class="hd">
                    <concern></concern>
                    <h2 class="prodName">{{fund.prod_name | defString }}</h2>
                </div>
                <!-- income items -->
                <ul class="income-items clearfix">
                    <li style="width:40%"><em class="inc">{{fund.prod_profit_rate_min|defNumber:0}}<sub>% ~</sub>{{fund.prod_profit_rate_max|defNumber:0}}<sub>%</sub></em>预期年化收益率</li>
                    <li style="width:30%"><em  ng-bind-html="fund.prod_min_share"></em>起购金额</li>
                    <li style="width:30%"><em>{{fund.prod_duration | defNumber }}<sub>天</sub></em>投资期限</li>
                </ul>

                <time class="time" ng-if="fund.sellStatus == 2">开抢时间：{{fund.ipo_begin_date| defDateString }} 09:15</time>
                <time class="time" ng-if="fund.sellStatus == 1 && fund.ipo_begin_date== fund.ipo_end_date">
                    销售时间：{{fund.ipo_begin_date| defDateString }} 09:15-15:30<br>
                    起息日：{{fund.prod_setup_date| defDateString }}</time>
                <time class="time" ng-if="fund.sellStatus == 1 && fund.ipo_begin_date!= fund.ipo_end_date">
                    销售时间：{{fund.ipo_begin_date| defDateString }}至{{fund.ipo_end_date_show | date:'MM-dd'}} 09:15-15:30<br>
                    起息日：{{fund.prod_setup_date| defDateString }}</time>
                <time class="time" ng-if="fund.sellStatus != 1 && fund.sellStatus != 2">
                    起息日：{{fund.prod_setup_date | defDateString }}<br>
                    到期日：{{fund.prod_expire_date | defDateString }}</time>

                <!-- progress -->
                <div ng-if="fund.sellStatus == 1">
                    <div class="progress">
                        <h3>剩余额度：{{(info.total_quota - info.used_quota) / 10000 | defNumber : 0}}万元</h3>
                        <p><i style="width:{{info.used_quota / info.total_quota * 100 | defNumber : 2}}%"></i></p>
                        <h3>剩余人数：{{info.max_holder_num - info.curr_holder_num | defNumber :0}}人</h3>
                        <p><i style="width:{{info.curr_holder_num / info.max_holder_num * 100 | defNumber : 2}}%"></i></p>
                    </div>
                    <div class="little-tip">• 剩余额度或剩余人数中任何一项为零即产品售罄</div>
                </div>

                <div ng-bind-html="fund.profit_desc" class="tborder"></div>
                <ul class="target clearfix" ng-if="!isBegin">
                    <li><em>沪深300</em>000300</li>
                    <li><em>{{latest_csi300.index_close | defNumber : 2}}</em>最新指数</li>
                    <li><em class="{{latest_csi300.inc >= 0 ? 'inc':'inc_'}}">{{latest_csi300.inc | defNumber : 2}}<sub>%</sub></em>近30天涨跌幅</li>
                </ul>

                <div class="target clearfix" ng-if="isBegin">
                    <p class="fl">参考年化收益率<em class="{{fund.prod_profit_rate>=0 ? 'inc' : 'inc_'}}">{{fund.prod_profit_rate | defNumber:2}}<sub>%</sub></em></p>
                    <p class="fr">沪深300涨跌幅<em class="{{latest_csi300.inc >= 0 ? 'inc':'inc_'}}">{{latest_csi300.inc | defNumber : 2}}<sub>%</sub></em></p>
                </div>
                <div class="chart clearfix" ng-show="isShowChart">
                    <div class="chart-idx" ng-if="isBegin">
                        沪深300最新指数：{{latest_csi300.index_close | defNumber : 2}}</div>
                    <time>更新日期：<span>{{ latest_csi300.date | date:'yyyy-MM-dd'}}</span></time>
                    <highchart config="csi300ChartConfig"></highchart>
                </div>
                <div class="chart-toggle" ng-class="{'on': !isShowChart}" ng-click="isShowChart = !isShowChart"><i></i>{{isBegin? '沪深300自产品成立日起走势图':'沪深300近30天走势图'}}</div>
            </div>
        </div>
        <!-- panel -->
        <div class="panel">
            <div class="item">
                <span class="title">产品类型</span>
                <span class="rtl">券商收益凭证</span>
            </div>
            <div class="item">
                <span class="title">风险</span>
                <span class="rtl">{{fund.prod_risk_level | dictionary : 'prodRisks'}}</span>
            </div>
            <div class="item group">
                <a href="#/tab/product-detail-otc/{{fund.prod_code}}">了解更多产品详情</a>
            </div>
        </div>
        <div class="little-tip">市场有风险，投资需谨慎！购买前需仔细阅读产品合同和招募说明书等法律文件。预期收益率仅作购买参考，实际收益以产品到期日所计算的为准。预期收益不代表对未来收益的承诺或保证。</div>
    </ion-content>

    <ion-footer-bar class="footer">
        <dl>
            <dt>购买费率：<em>{{fund.prod_rate | defString}}</em>%</dt>
            <dd>
                <a ng-if="fund.sellStatus == 1" class="btn"
                   buy-button prod_code="{{fund.prod_code}}" prod_source="{{fund.prod_source}}" >购买</a>
                <a ng-if="fund.sellStatus == 2" class="btn disable">购买</a>
                <a ng-if="fund.sellStatus == 3" class="btn disable">已售罄</a>
                <a ng-if="fund.sellStatus == 4" class="btn disable">暂停申购</a>
                <a ng-if="fund.sellStatus == 5" class="btn disable">暂停交易</a>
            </dd>
        </dl>
    </ion-footer-bar>
</ion-view>